<template>
<!-- 海外 -->
    <div>
        <img :src="img[0].main_image" alt />
<!-- 海外产品 -->
    <div v-for="(ite,idx) in news" :key="idx" class="event-item">
      <a href="#">
        <img :src="ite.imageUrl" alt />
        <div class="event-info">
          <span class="event-brand">{{ite.englishName}}</span>
          <span class="event-name">{{ite.chineseName}}</span>
          <span class="event-discount">{{ite.discountText}}</span>
        </div>
      </a>
    </div>
    </div>
</template>

<script>
import {getGoodsoversea} from '../api/goods'
import {getGoodsoverseas} from '../api/goods'
    export default {
        data() {
            return {
                img:[],
                news:[]
            }
        },
        async created() {
    //获取banner数据
    let res = await getGoodsoversea();
    console.log(res);
    this.img = res.data.banners;

    // 获取海外产品
    let ress = await getGoodsoverseas();
    console.log(ress);
    this.news = ress.data.eventList;
  },
    }
</script>

<style scoped>
img {
  width: 100%;
  height: 100%;
}
.event-item {
  width: 22.2rem;
  height: 12.52rem;
  overflow: hidden;
  margin: 0px auto 1.1rem;
  position: relative;
}
.event-item img {
  display: block;
  width: 100%;
  height: 100%;
}
.event-info {
  width: 21rem;
  height: 5rem;
  position: absolute;
  left: 0;
  bottom: -20px;
  background-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.55));
  padding: 0 0 0px 20px;
}
.event-brand {
  display: block;
  margin-bottom: 1rem;
  text-transform: uppercase;
  line-height: 0.426667rem;
  font-size: 0.426667rem;
  color: #fff;
}
.event-name {
  display: block;
  margin-bottom: 1rem;
  height: 0.373333rem;
  line-height: 0.373333rem;
  font-size: 0.373333rem;
  color: #fff;
}
.event-discount {
  display: block;
  margin-bottom: 1rem;
  height: 0.373333rem;
  line-height: 0.373333rem;
  font-size: 0.373333rem;
  color: #fff;
}
</style>